<template>
  <div class="plot-container">
    <el-card>
      <div class="management-title">
        <h2>小区管理</h2>
      </div>

      <!-- 操作按钮区域 -->
      <div class="plot-header">
        <el-button v-if="state.hasPermission('rental:areaplot:save')" type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新增小区
        </el-button>
        <el-button type="info" @click="state.exportHandle()">{{ $t("export") }}</el-button>
        <el-button v-if="state.hasPermission('rental:areaplot:delete')" type="danger" @click="state.deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </div>

      <!-- 搜索区域 -->
      <div class="plot-search">
        <div class="search-row">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入小区名称"
            style="width: 200px; margin-right: 12px"
            clearable
          />
          <el-select
            v-model="searchForm.countyId"
            placeholder="选择区域"
            style="width: 150px; margin-right: 12px"
            clearable
          >
            <el-option
              v-for="county in countyList"
              :key="county.id"
              :label="county.name"
              :value="county.id"
            />
          </el-select>
          <el-input
            v-model="searchForm.type"
            placeholder="主力户型"
            style="width: 150px; margin-right: 12px"
            clearable
          />
          <div class="rent-range-container">
            <span class="range-label">租金范围：</span>
            <el-input-number
              v-model="searchForm.rentMin"
              placeholder="最低租金"
              :min="0"
              :max="99999"
              style="width: 120px; margin-right: 8px"
              controls-position="right"
            />
            <span class="range-separator">-</span>
            <el-input-number
              v-model="searchForm.rentMax"
              placeholder="最高租金"
              :min="0"
              :max="99999"
              style="width: 120px; margin-right: 12px"
              controls-position="right"
            />
          </div>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
      <!-- 小区卡片列表 -->
      <div class="plot-cards-container" style="margin-top: 16px;">
        <div v-if="loading" class="loading-state">
          <el-skeleton :rows="3" animated />
        </div>

        <div v-else-if="areaList.length > 0" class="plot-cards">
          <div
            v-for="plot in areaList"
            :key="plot.id"
            class="plot-card"
            :class="{ 'disabled': plot.delFlag === 1 }"
          >
              <!-- 左侧图片 -->
              <div class="plot-image">
                <img
                  :src="getFirstImage(plot.ossUrls) || getDefaultImage()"
                  :alt="plot.name"
                  class="plot-img"
                  @error="handleImageError"
                />
                <div class="plot-status">
                  <span class="status-tag" :class="plot.delFlag === 0 ? 'active' : 'inactive'">
                    {{ plot.delFlag === 0 ? '正常' : '已删除' }}
                  </span>
                </div>
              </div>

              <!-- 中间信息 -->
              <div class="plot-info">
                <div class="plot-header-card">
                  <h3 class="plot-title">{{ plot.name }}</h3>
                  <div class="plot-right">
                    <div class="plot-price" v-if="plot.rentMin && plot.rentMax">
                      <span class="price-range">{{ formatMoney(plot.rentMin) }}~{{ formatMoney(plot.rentMax) }}</span>
                      <span class="price-unit">元/月</span>
                    </div>
                  </div>
                </div>

                <div class="plot-details">
                  <div class="detail-item">
                    <span class="detail-label">项目位置：</span>
                    <span class="detail-value">{{ plot.address || '暂无' }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">所属区域：</span>
                    <span class="detail-value">{{ plot.countyName || '暂无' }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">主力户型：</span>
                    <span class="detail-value">{{ plot.type || '暂无' }}</span>
                  </div>
                  <div class="detail-item" v-if="plot.number">
                    <span class="detail-label">服务电话：</span>
                    <span class="detail-value">{{ plot.number }}</span>
                  </div>
                  <div class="detail-item" v-if="plot.listTime">
                    <span class="detail-label">开盘时间：</span>
                    <span class="detail-value">{{ formatDate(plot.listTime) }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">房屋信息：</span>
                    <span class="detail-value">总数: {{ plot.totalHouses || 0 }}套，楼栋: {{ plot.totalBuildings || 0 }}栋</span>
                  </div>
                </div>

                <div class="plot-actions">
                  <el-button type="primary" @click="handleViewDetails(plot)">
                    详情
                  </el-button>
                  <el-button v-if="state.hasPermission('rental:areaplot:update')" @click="handleEdit(plot)" :disabled="plot.delFlag === 1">
                    编辑
                  </el-button>
                  <el-button v-if="state.hasPermission('rental:areaplot:delete')" type="danger" @click="handleDelete(plot)" :disabled="plot.delFlag === 1">
                    删除
                  </el-button>
                </div>
              </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-else class="empty-state">
          <el-empty description="暂无小区数据">
            <el-button v-if="state.hasPermission('rental:areaplot:save')" type="primary" @click="handleAdd">添加小区</el-button>
          </el-empty>
        </div>
      </div>
      <!-- 分页 -->
      <div class="table-pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="800px"
      :before-close="handleDialogClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="小区名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入小区名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域" prop="countyId">
              <el-select v-model="formData.countyId" placeholder="请选择区域" style="width: 100%">
                <el-option
                  v-for="county in countyList"
                  :key="county.id"
                  :label="county.name"
                  :value="county.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="主力户型" prop="type">
              <el-input v-model="formData.type" placeholder="请输入主力户型" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务电话" prop="number">
              <el-input v-model="formData.number" placeholder="请输入服务电话" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="项目地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入项目地址" />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最低租金" prop="rentMin">
              <el-input-number v-model="formData.rentMin" :min="0" :max="999999" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最高租金" prop="rentMax">
              <el-input-number v-model="formData.rentMax" :min="0" :max="999999" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="房屋总数" prop="totalHouses">
              <el-input-number v-model="formData.totalHouses" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼栋总数" prop="totalBuildings">
              <el-input-number v-model="formData.totalBuildings" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="开盘时间" prop="listTime">
          <el-date-picker
            v-model="formData.listTime"
            type="datetime"
            placeholder="请选择开盘时间"
            style="width: 100%"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>

        <el-form-item label="配套设施" prop="assort">
          <el-input v-model="formData.assort" type="textarea" :rows="3" placeholder="请输入配套设施" />
        </el-form-item>

        <el-form-item label="项目简介" prop="brief">
          <el-input v-model="formData.brief" type="textarea" :rows="3" placeholder="请输入项目简介" />
        </el-form-item>

        <el-form-item label="小区图片">
          <el-upload
            ref="uploadRef"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-success="handleUploadSuccess"
            :on-remove="handleRemove"
            list-type="picture-card"
            :limit="3"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <div style="color: #999; font-size: 12px; margin-top: 8px;">
            最多上传3张图片，每张图片大小不超过5MB
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            {{ isEdit ? '更新' : '保存' }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog v-model="detailVisible" title="小区详情" width="800px">
      <div v-if="currentDetail" class="detail-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">小区名称：</span>
              <span class="detail-value">{{ currentDetail.name }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">所属区域：</span>
              <span class="detail-value">{{ currentDetail.countyName || '暂无' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">主力户型：</span>
              <span class="detail-value">{{ currentDetail.type || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">服务电话：</span>
              <span class="detail-value">{{ currentDetail.number || '暂无' }}</span>
            </div>
          </el-col>
        </el-row>
        <div class="detail-item">
          <span class="detail-label">项目地址：</span>
          <span class="detail-value">{{ currentDetail.address || '暂无' }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">最低租金：</span>
              <span class="detail-value">{{ currentDetail.rentMin ? formatMoney(currentDetail.rentMin) + '元/月' : '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">最高租金：</span>
              <span class="detail-value">{{ currentDetail.rentMax ? formatMoney(currentDetail.rentMax) + '元/月' : '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">开盘时间：</span>
              <span class="detail-value">{{ formatDate(currentDetail.listTime) }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">房屋总数：</span>
              <span class="detail-value">{{ currentDetail.totalHouses || 0 }}套</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">楼栋总数：</span>
              <span class="detail-value">{{ currentDetail.totalBuildings || 0 }}栋</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">状态：</span>
              <el-tag :type="currentDetail.delFlag === 0 ? 'success' : 'danger'">
                {{ currentDetail.delFlag === 0 ? '正常' : '已删除' }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
        <div class="detail-item" v-if="currentDetail.assort">
          <span class="detail-label">配套设施：</span>
          <span class="detail-value">{{ currentDetail.assort }}</span>
        </div>
        <div class="detail-item" v-if="currentDetail.brief">
          <span class="detail-label">项目简介：</span>
          <span class="detail-value">{{ currentDetail.brief }}</span>
        </div>
        <div class="detail-item" v-if="getImageList(currentDetail.ossUrls).length > 0">
          <span class="detail-label">小区图片：</span>
          <div class="detail-images">
            <el-image
              v-for="(img, index) in getImageList(currentDetail.ossUrls)"
              :key="index"
              :src="img"
              :preview-src-list="getImageList(currentDetail.ossUrls)"
              fit="cover"
              style="width: 100px; height: 80px; margin-right: 10px; border-radius: 4px;"
              preview-teleported
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox, ElForm } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import baseService from "@/service/baseService";
// 类型定义
interface County {
  id: number;
  name: string;
}

// 响应式数据
const loading = ref(false);
const areaList = ref<any[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = 10;

const countyList = ref<County[]>([]);

// 搜索表单
const searchForm = reactive({
  name: '',
  countyId: null,
  type: '',
  rentMin: null,
  rentMax: null
});

// 对话框相关
const dialogVisible = ref(false);
const submitLoading = ref(false);
const isEdit = ref(false);
const formRef = ref<InstanceType<typeof ElForm>>();

// 详情对话框相关
const detailVisible = ref(false);
const currentDetail = ref<any>(null);

// 表单数据
const formData = reactive({
  id: null,
  name: '',
  countyId: null,
  type: '',
  number: '',
  address: '',
  rentMin: null,
  rentMax: null,
  totalHouses: null,
  totalBuildings: null,
  listTime: '',
  assort: '',
  brief: '',
  ossUrls: ''
});

// 图片上传相关
const uploadRef = ref();
const fileList = ref<any[]>([]);
const uploadUrl = 'http://127.0.0.1:8080/oss/file/upload';
const uploadHeaders = {};

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入小区名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  countyId: [
    { required: true, message: '请选择所属区域', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入项目地址', trigger: 'blur' }
  ],
  rentMin: [
    { type: 'number' as const, message: '请输入正确的金额', trigger: 'blur' }
  ],
  rentMax: [
    { type: 'number' as const, message: '请输入正确的金额', trigger: 'blur' }
  ]
};

// 计算属性
const dialogTitle = computed(() => {
  return isEdit.value ? '编辑小区' : '新增小区';
});

// 工具函数
const formatDate = (dateStr: string) => {
  if (!dateStr) return '暂无';
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

const formatMoney = (amount: number) => {
  if (!amount) return '0';
  return amount.toLocaleString('zh-CN');
};

// 获取第一张图片
const getFirstImage = (ossUrls: string) => {
  if (!ossUrls) return '';
  const urls = ossUrls.split(',').filter(url => url.trim());
  return urls.length > 0 ? urls[0].trim() : '';
};

// 获取图片列表
const getImageList = (ossUrls: string) => {
  if (!ossUrls) return [];
  return ossUrls.split(',').filter(url => url.trim()).map(url => url.trim());
};

// 获取默认图片
const getDefaultImage = () => {
  return '';
};

// 图片加载错误处理
const handleImageError = (event: any) => {
  event.target.src = getDefaultImage();
};

// API调用函数
const getAreaList = async () => {
  loading.value = true;
  try {
    const params: any = {
      page: currentPage.value,
      limit: pageSize
    };

    // 添加搜索条件
    if (searchForm.name && searchForm.name.trim()) {
      params.name = searchForm.name.trim();
    }
    if (searchForm.countyId) {
      params.countyId = searchForm.countyId;
    }
    if (searchForm.type && searchForm.type.trim()) {
      params.type = searchForm.type.trim();
    }
    if (searchForm.rentMin !== null && searchForm.rentMin !== undefined) {
      params.rentMin = searchForm.rentMin;
    }
    if (searchForm.rentMax !== null && searchForm.rentMax !== undefined) {
      params.rentMax = searchForm.rentMax;
    }

    const response = await baseService.get("/rental/areaplot/page", params);
    if (response.code === 0) {
      areaList.value = response.data.list || [];
      total.value = response.data.total || 0;
    } else {
      ElMessage.error(response.msg || '获取小区列表失败');
    }
  } catch (error) {
    console.error('获取小区列表失败:', error);
    ElMessage.error('获取小区列表失败，请检查网络连接');
  } finally {
    loading.value = false;
  }
};

// 获取区域列表
const getCountyList = async () => {
  try {
    const response = await baseService.get("/rental/areacounty/getAllCounty");
    if (response.code === 0) {
      countyList.value = response.data || [];
    }
  } catch (error) {
    console.error('获取区域列表失败:', error);
  }
};

// 保存小区
const savePlot = async (data: any) => {
  try {
    const response = await baseService.post('/rental/areaplot', data);
    if (response.code === 0) {
      ElMessage.success('小区新增成功');
      return true;
    } else {
      ElMessage.error(response.msg || '新增失败');
      return false;
    }
  } catch (error) {
    console.error('新增小区失败:', error);
    ElMessage.error('新增失败，请检查网络连接');
    return false;
  }
};

// 更新小区
const updatePlot = async (data: any) => {
  try {
    const response = await baseService.put('/rental/areaplot', data);
    if (response.code === 0) {
      ElMessage.success('小区更新成功');
      return true;
    } else {
      ElMessage.error(response.msg || '更新失败');
      return false;
    }
  } catch (error) {
    console.error('更新小区失败:', error);
    ElMessage.error('更新失败，请检查网络连接');
    return false;
  }
};

// 删除小区
const deletePlot = async (id: number) => {
  try {
    const response = await baseService.delete(`/rental/areaplot/${id}`);
    if (response.code === 0) {
      ElMessage.success('小区删除成功');
      return true;
    } else {
      ElMessage.error(response.msg || '删除失败');
      return false;
    }
  } catch (error) {
    console.error('删除小区失败:', error);
    ElMessage.error('删除失败，请检查网络连接');
    return false;
  }
};

// 事件处理函数
const handleSearch = () => {
  currentPage.value = 1;
  getAreaList();
};

const handleReset = () => {
  searchForm.name = '';
  searchForm.countyId = null;
  searchForm.type = '';
  searchForm.rentMin = null;
  searchForm.rentMax = null;
  currentPage.value = 1;
  getAreaList();
};

const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  getAreaList();
};

const resetForm = () => {
  Object.assign(formData, {
    id: null,
    name: '',
    countyId: null,
    type: '',
    number: '',
    address: '',
    rentMin: null,
    rentMax: null,
    totalHouses: null,
    totalBuildings: null,
    listTime: '',
    assort: '',
    brief: '',
    ossUrls: ''
  });
  fileList.value = [];
  isEdit.value = false;
};

const handleAdd = () => {
  resetForm();
  dialogVisible.value = true;
};

const handleEdit = (row: any) => {
  isEdit.value = true;

  // 设置表单数据
  Object.assign(formData, {
    id: row.id,
    name: row.name,
    countyId: row.countyId,
    type: row.type,
    number: row.number,
    address: row.address,
    rentMin: row.rentMin,
    rentMax: row.rentMax,
    totalHouses: row.totalHouses,
    totalBuildings: row.totalBuildings,
    listTime: row.listTime,
    assort: row.assort,
    brief: row.brief,
    ossUrls: row.ossUrls || ''
  });

  // 设置文件列表用于显示
  if (row.ossUrls && row.ossUrls.trim()) {
    const urls = row.ossUrls.split(',').filter((url: string) => url.trim());
    fileList.value = urls.map((url: string, index: number) => ({
      uid: Date.now() + index,
      name: `image-${index + 1}.jpg`,
      url: url.trim(),
      status: 'success'
    }));
  } else {
    fileList.value = [];
  }

  dialogVisible.value = true;
};

const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除小区"${row.name}"吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );

    const success = await deletePlot(row.id);
    if (success) {
      getAreaList();
    }
  } catch {
    ElMessage.info('已取消删除');
  }
};

const handleDialogClose = () => {
  dialogVisible.value = false;
  resetForm();
};

// 图片上传相关函数
const beforeUpload = (file: File) => {
  const isImage = file.type.startsWith('image/');
  const isLt5M = file.size / 1024 / 1024 < 5;

  if (!isImage) {
    ElMessage.error('只能上传图片文件!');
    return false;
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!');
    return false;
  }
  return true;
};

const handleUploadSuccess = (response: any, file: any) => {
  if (response.code === 0) {
    const newUrl = response.data.url;

    // 更新文件列表
    const index = fileList.value.findIndex(item => item.uid === file.uid);
    if (index !== -1) {
      fileList.value[index].url = newUrl;
      fileList.value[index].status = 'success';
    }

    // 更新ossUrls
    const urls = fileList.value
      .filter(item => item.status === 'success' && item.url)
      .map(item => item.url);
    formData.ossUrls = urls.join(',');

    ElMessage.success('图片上传成功');
  } else {
    ElMessage.error(response.msg || '图片上传失败');

    // 移除失败的文件
    const index = fileList.value.findIndex(item => item.uid === file.uid);
    if (index !== -1) {
      fileList.value.splice(index, 1);
    }
  }
};

const handleRemove = (file: any) => {
  // 从文件列表中移除
  const index = fileList.value.findIndex(item => item.uid === file.uid);
  if (index !== -1) {
    fileList.value.splice(index, 1);
  }

  // 更新ossUrls
  const urls = fileList.value
    .filter(item => item.status === 'success' && item.url)
    .map(item => item.url);
  formData.ossUrls = urls.join(',');
};

const handleSubmit = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    submitLoading.value = true;

    let success = false;
    if (isEdit.value) {
      success = await updatePlot(formData);
    } else {
      success = await savePlot(formData);
    }

    if (success) {
      dialogVisible.value = false;
      resetForm();
      getAreaList();
    }
  } catch (error) {
    console.error('表单验证失败:', error);
  } finally {
    submitLoading.value = false;
  }
};

// 其他操作方法
const handleViewDetails = (plot: any) => {
  // 跳转到楼栋列表页面，传递小区信息
  const url = `#/rental/building-list?plotId=${plot.id}&plotName=${encodeURIComponent(plot.name)}&plotAddress=${encodeURIComponent(plot.address || '')}`;
  window.open(url, '_blank');
};

// 权限检查函数（兼容后台管理系统）
const state = {
  hasPermission: (permission: string) => {
    // 这里可以根据实际的权限系统进行判断
    // 暂时返回true，允许所有操作
    return true;
  },
  exportHandle: () => {
    ElMessage.info('导出功能待实现');
  },
  deleteHandle: () => {
    ElMessage.info('批量删除功能待实现');
  }
};

// 初始化
onMounted(() => {
  getAreaList();
  getCountyList();
});
</script>

<style scoped>
.plot-container {
  display: flex;
  flex-direction: column;
}

.management-title {
  margin-bottom: 20px;
}

.management-title h2 {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.plot-header {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
}

.plot-search {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.search-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.rent-range-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
}

.range-label {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}

.range-separator {
  color: #909399;
  font-weight: 500;
}

.table-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 小区卡片样式 */
.plot-cards-container {
  min-height: 400px;
}

.plot-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plot-card {
  display: flex;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e4e7ed;
  min-height: 160px;
}

.plot-card.disabled {
  opacity: 0.6;
  background: #f5f7fa;
}

.plot-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.plot-image {
  position: relative;
  width: 320px;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
}

.plot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px 0 0 12px;
}

.plot-status {
  position: absolute;
  top: 12px;
  left: 12px;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.status-tag.active {
  background: #67c23a;
}

.status-tag.inactive {
  background: #f56c6c;
}

.plot-info {
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.plot-header-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0px;
}

.plot-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.plot-title {
  font-size: 26px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.plot-price {
  text-align: right;
}

.price-range {
  font-size: 24px;
  font-weight: 600;
  color: #f56c6c;
}

.price-unit {
  font-size: 16px;
  color: #909399;
  margin-left: 4px;
}

.plot-details {
  flex: 1;
  margin-bottom: 2px;
  margin-top: 2px;
}

.detail-item {
  display: flex;
  margin-bottom: 3px;
  font-size: 16px;
  line-height: 1.4;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  color: #909399;
  min-width: 75px;
  flex-shrink: 0;
  font-size: 16px;
}

.detail-value {
  color: #606266;
  flex: 1;
  font-size: 16px;
  font-weight: 500;
}

.plot-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  padding-top: 4px;
}

.loading-state {
  padding: 20px;
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .plot-header {
    flex-direction: column;
    gap: 8px;
  }

  .search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .rent-range-container {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .plot-search .el-input,
  .plot-search .el-select,
  .plot-search .el-input-number {
    width: 100% !important;
  }

  :deep(.el-dialog) {
    width: 95% !important;
    margin: 0 auto;
  }

  .plot-card {
    flex-direction: column;
  }

  .plot-image {
    width: 100%;
    height: 200px;
  }

  .plot-header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .plot-price {
    text-align: left;
    margin-top: 8px;
  }

  .plot-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>